【Day02】Leaflet從入門到微精通 - 新增座標點 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

【Day02】Leaflet從入門到微精通 - 新增座標點

leaflet

weijung0923 2024-09-24 13:02:05 ‧ 187 瀏覽

分享至

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map Example</title>
    <!-- 引入 Leaflet 的 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 地圖容器 -->
    <div id="map"></div>

    <!-- 引入 Leaflet 的 JS -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <script>
        // 初始化地圖並設置中心點和縮放級別
        const map = L.map('map', {
            center: [23.488793, 120.846642], // 台灣的中心點
            zoom: 7.5,
            maxZoom: 20,
            minZoom: 5,
            zoomControl: false, // 關閉預設的縮放控制
        });

        // 添加 OpenStreetMap 作為底圖
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 添加一個點標記
        const point = L.marker([23, 121]).addTo(map);

    </script>
</body>
</html>

說明：

地圖初始化：
L.map('map', {center: ..., zoom: ...}) 來創建一個 Leaflet 地圖，設置中心點和縮放級別。
zoomControl: false 取消預設的縮放控制（您可以像 OpenLayers 一樣，通過 controls: [] 不添加控制器）。
底圖：
使用 L.tileLayer() 添加 OpenStreetMap 作為底圖，類似於 ol.layer.Tile 和 ol.source.OSM() 在 OpenLayers 中的作用。

-加入地圖：
使用 point.addTo(map) 將標記圖層添加到地圖中。